package myJs.user.mission.horizontalBoxplotResult

import com.softwaremill.quicklens._
import myJs.cps._

import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._
import cats.effect._
import myJs.Implicits._

/** Created by yz on 3/11/2020
  */
object ColorCp {

  val plotO=Cp.plotO

  case class Props(
      basicData: plotO.ColorData,
      basicDataChange: (plotO.ColorData => plotO.ColorData) => SyncIO[Unit]
  ){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>

    object FTool {

      def strChange(f: PathLazyModify[plotO.ColorData, String]) = (v: String) => {
        props.basicDataChange {
          f.setTo(v)
        }
      }

    }

    val basicData = props.basicData

    Fragment(
      div(
        border := "1px solid lightgrey", borderRadius := "5px", padding := "10px 5px",
          marginBottom := "10px",
        h4("分组颜色："),
        basicData.groups.zip(basicData.colors).zipWithIndex.toVdomArray { case ((group, color), curI) =>
          div(
            key := s"${group}",
            MiniColorInlineCp.Props(
              label = group,
              value = color,
              onChange = FTool.strChange(modifyLens[plotO.ColorData](_.colors.index(curI))),
              name = s"color.${curI}",
              labelWidth = 4,
              inputWidth = 8
            ).render
          )
        },
      )


    )

  }

}
